<template>
  <a-select
      v-model:model-value="value as any"
      :options="optionData"
      :allow-search="true"
      :multiple="multiple"
      :loading="loading"
      :disabled="loading"
      :filter-option="labelFilter"
      :placeholder="placeholder"
      :allow-clear="true"
  />
</template>

<script setup lang="ts">
import type {SelectOptionData} from '@arco-design/web-vue';
import {computed, onBeforeMount, ref} from 'vue';
import useLoading from '@/hooks/loading';
import {labelFilter} from '@/types/form';
import {AnyObject} from "@/types/global";

const props = withDefaults(
    defineProps<
        Partial<{
          source:AnyObject[]
          modelValue: number | Array<number> | string |  Array<string>;
          multiple: boolean;
          placeholder:string
          optionValue: string
          optionLabel: string
        }>
    >(),
    {
      multiple: false,
      placeholder:''
    }
);
const emits = defineEmits(['update:modelValue']);

const { loading, setLoading } = useLoading();

const value = computed({
  get() {
    return props.modelValue;
  },
  set(e) {
    emits('update:modelValue', e);
  },
});
const optionData = ref<Array<AnyObject>>([]);
onBeforeMount(async () => {

  const render = (arr: AnyObject []): SelectOptionData[] => {
    return arr
        .map((s) => {
          // 当前节点
          return {
            label: s[props.optionLabel as string],
            value: s[props.optionValue as string],
          } as SelectOptionData;
        })
        .filter(Boolean);
  };
  setLoading(true);
  optionData.value=render(props.source as AnyObject[])
  setLoading(false);


});
</script>

<style scoped lang="less"></style>
